<template>
  <div class="wallet_search_page">
    <ul class="searchPanel">
      <li class="item">
        <el-select v-model="current_state" @change="search" placeholder="请选择">
          <el-option
            v-for="item in search_state_list"
            :key="item.status"
            :label="item.label"
            :value="item.status"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </li>
      <li class="item">
        <el-date-picker
          v-model="date_select"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </li>
      <li class="item">
        <el-button @click="search" type="primary">查询</el-button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Action, Mutation } from "vuex-class";
import eventBus from "@/server/eventBus";
import { DatePickerType } from 'element-ui/types/date-picker';
const namespace: string = "order_mrg";
@Component({
  components: {}
})
export default class Ordersearch extends Vue {
  @Getter("search_state", { namespace }) search_state_list: any;
  @Action("get_order_list", { namespace }) get_order_list: any;

  @Prop() private currentPage!: number;
  private current_state: any = "";
  private date_select: any ="";

  private search() {
    // this.currentPage = 1
    (this.$parent as any).reset_page()
    let self = this
    setTimeout(function () {
      self.change_page()
    }, 100)
  }

  private get_search () {
    console.log("this.date_select...:", this.date_select)
    if (this.date_select == null) this.date_select = ''
    return {
      status: this.current_state,
      minDate: this.date_select[0] || '',
      maxDate: this.date_select[1] || '',
      page: this.currentPage - 1
    }
  }

  private change_page () {
    this.get_order_list(this.get_search());
  }

  private mounted() {
    console.log("search list:", this);
    let self = this
    this.get_order_list(this.get_search());
    eventBus.$on("change_page", self.change_page.bind(self));
  }
}
</script>
<style scoped lang="scss">
.wallet_search_page {
  margin: 0 auto;
  height: 50px;
  background: #fdfdfd;
  .searchPanel {
    display: flex;
    padding: 5px;
    .item {
      margin-left: 0.5rem;
    }
  }
}
</style>